<!-- /*
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <el-form
    :model="fromData"
    ref="formRef"
    :rules="rules"
    class="fromClass CHAGE_SCROLLBAR"
  >
    <el-row :gutter="42" class="public_row">
      <el-col :span="24">
        <el-form-item label="姓名：" class="flexStyle" prop="oldname">
          <el-input
            placeholder="请输入姓名"
            v-model="fromData.oldname"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="80" class="public_row">
      <el-col :span="16">
        <el-form-item label="身份证ID：" class="flexStyle" prop="oldcardid">
          <el-input
            placeholder="请输入身份证ID"
            v-model="fromData.oldcardid"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="性别：" class="flexStyle">
          <el-radio-group v-model="fromData.oldsex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="60" class="public_row">
      <el-col :span="10">
        <el-form-item label="手机号：" class="flexStyle" prop="oldphone">
          <el-input
            placeholder="请输入"
            v-model="fromData.oldphone"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="出生日期：" class="flexStyle" prop="olddateofbirth">
          <el-date-picker
            v-model="fromData.olddateofbirth"
            type="date"
            style="width: 100%"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOption"
            @change="changeHandler"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="年龄：" class="flexStyle" >
          <el-input disabled v-model="fromData.oldage"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="42" class="public_row">
      <el-col :span="24">
        <el-form-item label="家庭住址：" class="flexStyle" prop="oldadress">
          <div class="flexStyleTwo">
            <VDistpicker @selected="onSelected"></VDistpicker>
            <el-input
              placeholder="请输入详细地址"
              v-model="fromData.oldadress"
              class="xiangxiAdress"
            ></el-input>
          </div>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="42" class="public_row">
      <el-col :span="24">
        <el-form-item label="证件照：" class="flexStyle">
          <el-upload
              class="upload-demo"
              action="http://localhost:4000/upDataImgInformation"
              :on-success="onSuccess"
              :on-remove="onremove"
              :limit="1"
              :file-list="fileList"
              :on-exceed="onExceed"
              :before-upload="beforeUpload"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过10MB
              </div>
            </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import VDistpicker from "v-distpicker";
import UploadTemplate from "@/components/UploadTemplate.vue";
export default {
  name: "fistPage",
  components: {
    UploadTemplate,
    VDistpicker,
  },
  data() {
    return {
      fileList:[],
      fromData: {
        oldname: "",
        oldcardid: "",
        oldsex: "",
        oldphone: "",
        olddateofbirth: "",
        oldage: "",
        oldadress: "",
        oldacasd:{
          province:'',
          city:'',
          area:''
        },
        imgsrc: [],
      },
      rules: {
        oldname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        oldcardid: [
          { required: true, message: "请完善身份证ID", trigger: "blur" },
        ],
        olddateofbirth: [
          { required: true, message: "请完善出生日期", trigger: "blur" },
        ],
        oldphone: [
          { required: true, message: "请完善手机号", trigger: "blur" },
        ],
        oldadress: [
          { required: true, message: "请完善家庭信息", trigger: "blur" },
        ],
      },
      pickerOption: {
        disabledDate(date) {
          return date.getTime() > Date.now();
        },
      },
      xiangxiAdress: "",
    };
  },
  methods: {
    onSelected(data) {
      this.fromData.oldacasd.province = data.province.value
      this.fromData.oldacasd.city = data.city.value
      this.fromData.oldacasd.area = data.area.value
    },
    //出生日期选择框
    changeHandler(val) {
      console.log(val);
      if (!val) {
        this.fromData.oldage = "";
        return;
      }
      this.fromData.oldage = new Date().getFullYear() - Number(val.slice(0, 4));
    },
    onExceed() {
      this.$notify.error({ title: "提示", message: "只能上传一张图片" });
    },
    //上传成功的回调
    onSuccess(response, file, fileLis){
      this.fromData.imgsrc = []
      this.fromData.imgsrc.push(response.data)
      this.$notify.success({ title: "提示", message: "图片上传成功" });
    },
    //删除图片的回调
    onremove(){
      if(this.fromDisabled) return
      this.fromData.imgsrc = []
    },
    //上传前的回调函数
    beforeUpload(file){
      if(file.type != 'image/png' && file.type != 'image/jpeg' && file.type != 'image/jpg'){
        this.$notify.warning({ title: "提示", message: "请上传指定格式的图片文件" });
        return false
      }
      const is10M = file.size / 1024 / 1024 < 10;
      if (!is10M) {
        this.$message.error("上传图片大小不能超过 10MB!");
        return false
      }
      return true
    },
    //点击保存往外吐东西
    outValue() {
      try {
        this.$refs.formRef.validate((bol) => {
            if(!bol) throw new Error("请完善老人基本信息");
        });
        if(this.fromData.oldsex == '') throw new Error("请完善老人的性别");
        if(this.fromData.oldacasd.province == '') throw new Error("请完善家庭住址");
        if(this.fromData.oldacasd.city == '') throw new Error("请完善家庭住址");
        if(this.fromData.oldacasd.area == '') throw new Error("请完善家庭住址");
        return { data: this.fromData, zt: true };
      } catch (e) {
        this.$notify.warning({ title: "错误", message: e });
        return { data: "", zt: false };
      }
      // return this.fromData
    },
  },
};
</script>

<style scoped lang="less">
.xiangxiAdress {
  width: 250px !important;
  height: 32px;
  /deep/.el-input__inner {
    height: 100%;
  }
}
/deep/.el-input__icon {
  line-height: 0px;
}

.flexStyle {
  display: flex;
  flex-direction: column;
}

.flexStyleTwo {
  display: flex;
  height: 32px;
}
/deep/.distpicker-address-wrapper select {
  height: 100%;
  width: 180px;
  padding: 0px 0px 0px 10px;
  margin-right: 15px;
  border-radius: 0px;
}
</style>
